import React, { Component } from 'react'
import { Button, Checkbox } from 'antd';
import './index.css'
export default class Item extends Component {
    handleChange = (id) => {
        return (event) => {
            this.props.updateTodo(id, event.target.checked);
        }
    }
    handleDelete = (id) => {
        let bool = window.confirm("Are you sure to delete this task?")
        if (bool) {
            this.props.deleteTodo(id);
        }
    }
    render() {
        const { id, name, done } = this.props
        return (
            <div className="Item">
                <Checkbox checked={done} onChange={this.handleChange(id)}>{name}</Checkbox>
                <Button type="primary" onClick={() => this.handleDelete(id)} className="clear">delete</Button>
            </div>
        )
    }
}
